<template>
    <div class="searchDialog">
        <div class="e-form">
            <el-form label-width="120px" :model="searchForm">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="验收日期">
                            <el-date-picker
                                v-model="searchForm.beginPlanDate"
                                type="date"
                                placeholder="请选择开始日期"
                                value-format="yyyy-MM-dd"
                                format="yyyy 年 MM 月 dd 日"
                                :picker-options="limitTimeStart"
                            >
                            </el-date-picker>
                            <span style="margin: 0 10px">至</span>
                            <el-date-picker
                                type="date"
                                v-model="searchForm.endPlanDate"
                                placeholder="请选择结束日期"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd"
                                :picker-options="limitTimeEnd"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="机构">
                            <el-input
                                placeholder="请选择机构"
                                v-model="orgName"
                                readonly
                            >
                                <i
                                    slot="suffix"
                                    class="el-input__icon el-icon-document-copy"
                                    @click="orgClick"
                                ></i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="供应商">
                            <el-input
                                placeholder="请选择供应商"
                                v-model="supplierName"
                                readonly
                            >
                                <i
                                    slot="suffix"
                                    class="el-input__icon el-icon-document-copy"
                                    @click="settleOrgClick"
                                ></i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="业务类型">
                                <el-checkbox
                                    :indeterminate="isIndeterminate"
                                    v-model="checkAll"
                                    @change="handleCheckAllChange"
                                    style="margin: 0 60px 0 0"
                                    >全选</el-checkbox
                                >
                                <div style="margin: 15px 0"></div>
                                <el-checkbox-group
                                    v-model="searchForm.businessType"
                                    @change="handleCheckedChange"
                                >
                                    <el-checkbox
                                        v-for="item in businessTypeListW"
                                        :label="item.key"
                                        :key="item.key"
                                        >{{ item.value }}</el-checkbox
                                    >
                                </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="状态">
                            <CheckAll
                                :chackdData.sync="stateList"
                                @checkdData="selectState"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div style="display: none">{{ localSearchData }}</div>
    </div>
</template>

<script>
import CheckAll from '@/components/common/checkAll'
import { selectDataClient } from '@/utils/common'
import { mapMutations } from 'vuex'
export default {
    components: {
        CheckAll
    },
    data () {
        return {
            searchForm: {
                beginPlanDate: '',
                businessType: [],
                endPlanDate: '',
                keyword: '',
                limit: 20,
                orgId: [localStorage.getItem('searchOrgId')],
                page: 1,
                states: [],
                supplierId: ''
            },
            jsdwData: {
                businessUnitTypes: [],
                keyword: '',
                limit: 10,
                orgId: '',
                outerTypes: [],
                page: 1,
                states: [],
                type: [0, 1, 2],
                supplierTypes: [],
                subcontractorTypes: [],
                businessTypes: [],
                factoOutSourcerType: []
            },
            limitTimeStart: {
                disabledDate: this._limitTimeStart
            },
            limitTimeEnd: {
                disabledDate: this._limitTimeEnd
            },
            businessTypeList: [
                {
                    key: 0,
                    value: '零星采购计划'
                },
                {
                    key: 1,
                    value: '物资采购合同'
                },
                {
                    key: 2,
                    value: '内部调拨'
                },
                {
                    key: 3,
                    value: '事实合同'
                }
            ],
            businessTypeWeekList: [
                {
                    key: '0',
                    value: '物资采购合同'
                },
                {
                    key: '1',
                    value: '临时需用计划(自购)'
                },
                {
                    key: '2',
                    value: '周材调拨'
                },
                {
                    key: '6',
                    value: '事实合同'
                }
            ],
            businessTypePriceList: [
                {
                    key: 0,
                    value: '零星采购计划'
                },
                {
                    key: 1,
                    value: '物资采购合同'
                },
                {
                    key: 2,
                    value: '调入（调拨单）'
                },
            ],
            isIndeterminate: true,
            checkAll: false,
            orgName: '',
            supplierName: '',
            acceptanceStr: '',
            businessTypeListW: [],
            stateList: [
                { value: 0, label: '草稿' },
                { value: 1, label: '审核中' },
                { value: 2, label: '已审核' },
                { value: 5, label: '已作废' },
                { value: 9, label: '共享审核中' },
            ]
        }
    },
    created () {
        // this.stateList = this.$store.state.settlementManagement.ysState //状态
        this.acceptanceStr = localStorage.getItem('acceptance')
        if(this.acceptanceStr === 'materials') {
            this.businessTypeListW = this.businessTypeList
        }else if(this.acceptanceStr === 'week') {
            this.businessTypeListW = this.businessTypeWeekList
        }else if(this.acceptanceStr === 'price') {
            this.businessTypeListW = this.businessTypePriceList
        }
    },
    computed: {
        localSearchData () {
            // 默认设置搜索标志为false，则不进行搜索回调
            const searchForm = this.searchForm
            searchForm.searching = false
            this.setSearchData(searchForm)
            return searchForm
        }
    },
    methods: {
        ...mapMutations(['setSearchData']),
        // 选择机构
        orgClick () {
            selectDataClient({
                SelectServiceToken: '/hr/org/getChildrenOrg', // 客户端对应方法名
                IsSingleMode: true, // 是否单选 true 单选 false 多选
                SelectedIDs: [], // 已选中id(注意：是上一次已选中的id，不是要传的参数，如果第一次选，则传[])
                InitParamsStr: '', // 接口参数(name为模拟参数)
                Title: '选择机构' // 标题
            }).then(val => {
                this.searchForm.orgId = val[0].orgId
                this.orgName = val[0].orgName
            })
        },
        // 选择结算单位
        settleOrgClick () {
            selectDataClient({
                SelectServiceToken: 'GeneralSelectOuter', // 客户端对应方法名
                IsSingleMode: true, // 是否单选 true 单选 false 多选
                SelectedIDs: [], // 已选中id(注意：是上一次已选中的id，不是要传的参数，如果第一次选，则传[]) // 这个是客户端给的,没有则为空
                InitParamsStr: JSON.stringify(this.jsdwData), // 接口参数(name为模拟参数)
                Title: '选择结算单位' // 标题
            }).then(res => {
                this.searchForm.supplierId = res[0].id
                this.supplierName = res[0].outerName
            })
        },
        // 获取已选择的状态
        selectState (val) {
            this.searchForm.states = val
        },
        // 日期选择后,禁用不可选的日期
        _limitTimeStart (time) {
            if (this.searchForm.endPlanDate) {
                return (
                    time.getTime() > new Date(this.searchForm.endPlanDate).getTime()
                )
            } else {
                return time.getTime() < 0
            }
        },
        _limitTimeEnd (time) {
            if (this.searchForm.beginPlanDate) {
                return (
                    time.getTime() <
                    new Date(this.searchForm.beginPlanDate).getTime() - 8.64e7
                )
            } else {
                return time.getTime() < 0
            }
        },
        // 全选
        handleCheckAllChange (val) {
            let checkAllIds = this.businessTypeListW.map(item => item.key)
            this.searchForm.businessType = val ? checkAllIds : []
            this.isIndeterminate = false
        },
        handleCheckedChange (value) {
            let checkedCount = value.length
            this.checkAll = checkedCount === this.businessTypeListW.length
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.businessTypeListW.length
        }
    }
}
</script>

<style lang="scss" scoped></style>
